<template>
	<view>
		<searchInput />
		<view class="" style="line-height: 35px;text-indent: 15px;" @tap="golst()">
			新的朋友
			<text style="float: right;color: red;padding-right: 15px;" v-if="$store.state.ynum">{{$store.state.ynum}}</text>
		</view>
		<view class="content">
			<u-index-list :scrollTop="scrollTop" :index-list="indexList" :active-color="'#3CC51F'">
				<view v-for="(item, index) in indexList" :key="index"  v-show="guolv1(item)">
					<u-index-anchor :index="item" />
					<view v-for="user in firendList" v-show="guolv(item,user)" :key="user.userId" class="list-cell" @tap="linkToCard(user)"
					 hover-class="message-hover-class">
						<image mode="widthFix" :src="user.headImg" />
						<view class="list-cell-name">{{user.userName}}</view>
					</view>
				</view>
			</u-index-list>
		</view>
	</view>
</template>

<script>
	import searchInput from '@/components/searchInput/index.vue'
	import {
		pinyin
	} from './pinyin.js'
	export default {
		components: {
			searchInput
		},
		data() {
			return {
				scrollTop: 0,
				indexList: ['☆', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
			};
		},
		methods: {
			chineseToInitials(word) {
				let SX = '';
				for (var i = 0; i < word.length; i++) {
					var c = word.charAt(i);
					if (/^[A-Z]+$/.test(c)) {
						SX += c;
					}
				}
				// console.log(SX)
				return SX
			},
			chineseToPinYin(l1) {
				var l2 = l1.length;
				var I1 = '';
				var reg = new RegExp('[a-zA-Z0-9]');
				for (var i = 0; i < l2; i++) {
					var val = l1.substr(i, 1);
					var name = this.arraySearch(val, pinyin);
					if (reg.test(val)) {
						I1 += val;
					} else if (name !== false) {
						I1 += name;
					}
				}
				I1 = I1.replace(/ /g, '-');
				while (I1.indexOf('--') > 0) {
					I1 = I1.replace('--', '-');
				}
				return I1;
			},
			arraySearch(l1, l2) {
				for (var name in pinyin) {
					if (pinyin[name].indexOf(l1) !== -1) {
						return this.ucfirst(name);
					}
				}
				return false;
			},
			ucfirst(l1) {
				if (l1.length > 0) {
					var first = l1.substr(0, 1).toUpperCase();
					var spare = l1.substr(1, l1.length);
					return first + spare;
				}
			},
			isChinese(temp) {
				var re = /[^\u4E00-\u9FA5]/;
				if (re.test(temp)) return false;
				return true;
			},

			guolv(str, obj) {
				// console.log(str,obj)
				var so = obj.userName;
				if(str == '☆'){
					var pattern = new RegExp("[`~!☆@%#$^&*()=|{}':;',　\\[\\]<>/? ／＼］\\.；：%……+ ￥（）【】‘”“'．。，、？１２３４５６７８９０－＝＿＋～？！＠＃＄％＾＆＊）]");
					if(pattern.test(so[0])){ return true;}
				};
				if (this.isChinese(so[0])) {
					var index = this.chineseToInitials(this.chineseToPinYin(so[0]));
					if (index == str) {
						return true;
					};
					
				}else{
					if(str == so[0]){
						return true;
					}
				}
				return false;
			},
			guolv1(str){
				for(var i in this.firendList){
					var so = this.firendList[i].userName;
					if(str == '☆'){
						var pattern = new RegExp("[`~!☆@%#$^&*()=|{}':;',　\\[\\]<>/? ／＼］\\.；：%……+ ￥（）【】‘”“'．。，、？１２３４５６７８９０－＝＿＋～？！＠＃＄％＾＆＊）]");
						if(pattern.test(so[0])){ return true;}
					};
					if (this.isChinese(so[0])) {
						var index = this.chineseToInitials(this.chineseToPinYin(so[0]));
						if (index == str) {
							return true;
						};
						
					}else{
						if(str == so[0]){
							return true;
						}
					}
				}
			},
			linkToCard(obj) {
				this.$u.route({
					url: 'pages/businessCard/businessCard',
					params: obj
				})
			},
			golst(){
				this.$u.route({
					url: 'pages/addressBook/tasklst',
				})
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		height: 100%;

		.list-cell {
			display: flex;
			box-sizing: border-box;
			width: 100%;
			padding: 10px 24rpx;
			overflow: hidden;
			color: #323233;
			font-size: 28rpx;
			line-height: 48rpx;
			background-color: #fff;
			align-items: center;

			image {
				width: 76rpx;
				height: 76rpx;
				border-radius: 12rpx;
				flex: 0 0 76rpx;
			}

			&-name {
				padding-left: 20rpx;
			}
		}
	}
</style>
